// 响应式断点 Mixin 定义
// 基于项目的断点变量定义

@use './variables.scss' as *;

// ==================== 通用响应式 Mixin ====================

// 小于指定断点
@mixin screen-below($breakpoint) {
  @media (max-width: #{$breakpoint - 1px}) {
    @content;
  }
}

// 大于等于指定断点
@mixin screen-above($breakpoint) {
  @media (min-width: #{$breakpoint}) {
    @content;
  }
}

// 在两个断点之间
@mixin screen-between($min-breakpoint, $max-breakpoint) {
  @media (min-width: #{$min-breakpoint}) and (max-width: #{$max-breakpoint - 1px}) {
    @content;
  }
}

// ==================== 语义化设备类型 Mixin ====================

// 移动端样式（小于1600px）
@mixin screen-mobile-only {
  @include screen-below($screen-4xl) {
    @content;
  }
}

// 平板端样式（1600px-1920px区间）
@mixin screen-tablet-only {
  @include screen-between($screen-4xl, $screen-5xl) {
    @content;
  }
}

// 桌面端样式（大于1920px）
@mixin screen-desktop-only {
  @include screen-above($screen-5xl) {
    @content;
  }
}

// ==================== 项目特定尺寸 Mixin ====================

// 小于1600px
@mixin screen-below-1600 {
  @include screen-below($screen-4xl) {
    @content;
  }
}

// 1600px-1920px区间
@mixin screen-1600-to-1920 {
  @include screen-between($screen-4xl, $screen-5xl) {
    @content;
  }
}

// 大于等于1920px
@mixin screen-above-1920 {
  @include screen-above($screen-5xl) {
    @content;
  }
}
